<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .container {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .form-group {
            margin-bottom: 1rem;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            color: #333;
        }

        input {
            width: 100%;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }

        button {
            background-color: #007bff;
            color: white;
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        .message {
            margin-top: 1rem;
            padding: 1rem;
            border-radius: 4px;
        }

        .success {
            background-color: #d4edda;
            color: #155724;
        }

        .error {
            background-color: #f8d7da;
            color: #721c24;
        }

        .tabs {
            display: flex;
            margin-bottom: 1rem;
        }

        .tab {
            padding: 1rem;
            cursor: pointer;
            border-bottom: 2px solid transparent;
        }

        .tab.active {
            border-bottom-color: #007bff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="tabs">
            <div class="tab active" onclick="switchTab('login')">登录</div>
            <div class="tab" onclick="switchTab('register')">注册</div>
        </div>

        <!-- 登录表单 -->
        <form id="loginForm" class="active-form">
            <div class="form-group">
                <label>用户名：</label>
                <input type="text" id="loginUsername" required>
            </div>
            <div class="form-group">
                <label>密码：</label>
                <input type="password" id="loginPassword" required>
            </div>
            <button type="submit">登录</button>
        </form>

        <!-- 注册表单 -->
        <form id="registerForm" style="display: none;">
            <div class="form-group">
                <label>用户名：</label>
                <input type="text" id="registerUsername" required>
            </div>
            <div class="form-group">
                <label>密码：</label>
                <input type="password" id="registerPassword" required>
            </div>
            <button type="submit">注册</button>
        </form>

        <div id="message" class="message"></div>
    </div>

    <script>
        // 切换登录/注册标签页
        function switchTab(tab) {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelectorAll('form').forEach(f => f.style.display = 'none');
            
            if(tab === 'login') {
                document.querySelector('.tab:nth-child(1)').classList.add('active');
                document.getElementById('loginForm').style.display = 'block';
            } else {
                document.querySelector('.tab:nth-child(2)').classList.add('active');
                document.getElementById('registerForm').style.display = 'block';
            }
            clearMessage();
        }

        // 显示消息
        function showMessage(text, isSuccess) {
            const msgDiv = document.getElementById('message');
            msgDiv.className = `message ${isSuccess ? 'success' : 'error'}`;
            msgDiv.textContent = text;
        }

        // 清空消息
        function clearMessage() {
            document.getElementById('message').textContent = '';
        }

        // 处理注册
        document.getElementById('registerForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const username = document.getElementById('registerUsername').value.trim();
            const password = document.getElementById('registerPassword').value.trim();

            if(!username || !password) {
                showMessage('用户名和密码不能为空', false);
                return;
            }

            try {
                const response = await fetch('http://localhost:3004/note/register', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, password })
                });

                const result = await response.json();
                
                if(result.code === 200) {
                    showMessage(`注册成功！用户ID: ${result.data.id}`, true);
                    // 自动切换到登录页
                    switchTab('login');
                } else {
                    showMessage(result.message, false);
                }
            } catch (error) {
                showMessage('网络请求失败，请检查服务状态', false);
            }
        });

        // 处理登录
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const username = document.getElementById('loginUsername').value.trim();
            const password = document.getElementById('loginPassword').value.trim();

            try {
                const response = await fetch('http://localhost:3004/note/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ username, password })
                });

                const result = await response.json();

                sessionStorage.setItem('aa', JSON.stringify(result))
                
                if(result.code === 200) {
                    showMessage(`登录成功！欢迎 ${result.data.username}`, true);
                    // 这里可以跳转到用户主页
                } else {
                    showMessage(result.message, false);
                }
            } catch (error) {
                showMessage('网络请求失败，请检查服务状态', false);
            }
        });
    </script>
</body>
</html>